import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import styles from './index.module.scss';
import request from '../../utils/request';
import { host, stringCheck } from '../../const';
import { Input, Form, Message, Grid } from '@alifd/next';

const { Row, Col } = Grid;

const FormItem = Form.Item;

const formItemLayout = {
    labelCol: { xxs: 6, s: 3, l: 3 },
    wrapperCol: { s: 12, l: 10 },
};


export default class Guide extends Component {
  static displayName = 'Guide';

  constructor(props) {
      super(props);
      this.state = {
          isRegister: false,
          value: {
              name: '',
              password: '',
              machineName: '',
          },
      };
  }

  componentDidMount() {
      request({
          method: 'GET',
          url: `${host}/license/register`,
      }).then((res) => {
          const code = res?.data?.code;
          if (code === 200) {
              window.isRegister = res?.data?.data;
              this.setState({
                  isRegister: res?.data?.data,
              });
          }
      });
      request({
          method: 'GET',
          url: `${host}/license/name`,
      }).then((res) => {
          const code = res?.data?.code;
          if (code === 200) {
              if (stringCheck(res?.data?.data) != null) {
                  document.getElementById('machineNameDiv').innerText = (`本机名称：${res.data.data}`);
              }
          }
      });
  }

  formChange = (value) => {
      this.setState({ value });
  };

  submit=() => {
      if (stringCheck(this.state.value.userName) == null) {
          Message.error('请输入用户名');
          return;
      }
      if (stringCheck(this.state.value.password) == null) {
          Message.error('请输入密码');
          return;
      }
      if (stringCheck(this.state.value.machineName) == null) {
          Message.error('请输入机器名称');
          return;
      }

      request({
          method: 'POST',
          url: `${host}/license/register`,
          data: this.state.value,
      }).then((res) => {
     	const data = res.data;
     	if (data.code == 200) {
     		this.setState({
     			isRegister: true,
     		});
     		window.isRegister = true;
     		Message.success(data.msg);
              document.getElementById('machineNameDiv').innerText = (`本机名称：${this.state.value.machineName}`);
     	} else {
     	    Message.error(data.msg);
     	}
      });
  }

  render() {
  	return (
          <IceContainer className={styles.icebox}>
              <h2>{ this.state.isRegister ? '本系统已注册' : '本系统未注册' }</h2>
              <Form hidden={this.state.isRegister} value={this.state.value} onChange={this.formChange} ref="form">
                  <FormItem
                      size="large"
                      label="用户名："
                      {...formItemLayout}
                  >
                      <Input name="userName" />
                  </FormItem>

                  <FormItem
                      size="large"
                      label="密码："
                      {...formItemLayout}
                  >
                      <Input htmlType="password" name="password" />
                  </FormItem>

                  <FormItem
                      size="large"
                      label="本机名称："
                      {...formItemLayout}
                  >
                      <Input name="machineName" />
                  </FormItem>

                  <Row style={{ marginTop: 20 }}>
                      <Col offset="3">
                          <Form.Submit
                              size="large"
                              type="primary"
                              style={{ width: 100 }}
                              onClick={this.submit}
                          >
                注 册
                          </Form.Submit>
                      </Col>
                  </Row>

              </Form>
          </IceContainer>
      );
  }
}

